// import { FC,useState, useEffect } from "react";
import { useState, useEffect } from "react";

import "./index.scss";
import { NavBar, Input } from "antd-mobile";
import { Button } from "react-vant";
// 引入icon
// import { createFromIconfontCN } from "@ant-design/icons";
import io from "socket.io-client";
const socket = io("http://localhost:7001");
// 引入阿里巴巴矢量库
// const IconFont = createFromIconfontCN({
//   scriptUrl: "//at.alicdn.com/t/font_2801631_0tc07luv47xl.js",
// });

// socket.on('tellYou', (data) => {
// 	console.log('data:', data)
// })

// // 1. 发送后台这个事件
// socket.emit('sendMsg', { code: 0 })
//
export const Customer= (props) => {
  const [data, setDate] = useState("");
  const [list, setList] = useState([]);

  useEffect(() => {
    //接收消息通知

    socket.on("res", (msg) => {
      // list.push(msg);
      setList(msg);
    });
  }, []);

  return (
    <div className="wrapper">
      {/* 导航栏 */}
      <NavBar>客服中心</NavBar>
      {/* 大盒子 */}
      <div className="container">
        <div className="CallCenter-box">
          {
          list.length ? list.map((item, ind) => {
                return (
                  <div className="box" key={ind}>
                    <p>{item.date}</p>
                    <div className={item.role === "user" ? "right" : "left"}>
                      {item.role !== "user" ? (
                        <div>
                          <img
                            className="head"
                            src="https://img0.baidu.com/it/u=273817602,2595591182&fm=26&fmt=auto"
                            alt=""
                          />
                          <span>{item.msg}</span>
                        </div>
                      ) : (
                        <div>
                          <span>{item.msg}</span>
                          <img
                            className="head"
                            src="https://img2.baidu.com/it/u=1462569300,2999175010&fm=26&fmt=auto"
                            alt=""
                          />
                        </div>
                      )}
                    </div>
                  </div>
                );
              })
            : ""}
        </div>
      </div>{" "}
      <div className="bottom">
        <div className="bottom-box">
          <div className="inp">
            <Input
              placeholder="输入文字描述病情"
              value={data}
              onChange={(e) => setDate(e)}
            />
            <Button
              size="small"
              type="primary"
              disabled={data ? false : true}
              onClick={() => {
                socket.emit("res", { role: "user", msg: data });
                setDate("");
              }}
            >
              发送
            </Button>
          </div>
          {/* <div>
            <IconFont type="icon-yuyin" />
            <IconFont type="icon-tupian" />
            <IconFont type="icon-xiaolian" />
          </div> */}
        </div>
      </div>
    </div>
  );
};

export default Customer;
